<template>
  <view class="panel-box">
    <image :src="showData.imageUrl" mode="widthFix"></image>
    <view class="info-box">
      <view class="distance-box" v-if="showData.distance">
        <text class="iconfont icon-weibiaoti--25"></text>
        <text class="distance-num">{{ showData.distance }}</text>
      </view>
      <view class="title">
        <text class="tiao-mao" v-if="showData.titleLogo">{{
          showData.titleLogo
        }}</text>
        <text>{{ showData.title }}</text>
      </view>
      <view class="tag-item tag-style" v-if="showData.keyTagText">{{
        showData.keyTagText
      }}</view>
      <view class="tag-item">{{ showData.productDes }}</view>
      <view class="tag-item fa-bu" v-if="showData.timeTagText">
        <text class="iconfont icon-weibiaoti--15"></text>
        {{ showData.timeTagText }}</view
      >
      <view class="price-box">
        <text class="rmb">¥</text>
        <text class="price">{{ showData.price }}</text>
        <text class="price-des">{{ showData.priceDes }}</text>

        <text class="payment-amount" v-if="showData.payment"
          >{{ showData.payment }}人付款</text
        >
      </view>
      <view class="other-tag" v-if="showData.logistics.length">
        <text
          class="tag-red"
          v-for="(l, index) in showData.logistics"
          :key="index"
        >
          {{ l }}</text
        >
        <text class="iconfont icon-weibiaoti--40"></text>
      </view>

      <!-- 店铺 -->
      <text class="merchant-info" v-if="showData.merchant">
        <text class="iconfont icon-weibiaoti--10"></text>
        <text class="in-shop">进店</text>
        <text class="shop-name">{{ showData.merchant }}</text>
      </text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "panel004",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 8,
          title: "男童夏季短袖t恤2025新款男孩薄款休闲中大童扎染儿童帅气上衣潮T",
          productDes: "B类 | 男 | 透气",
          imageUrl: "/static/dataImage/taobao/008.avif",
          price: "33.77",
          priceDes: "领券立减10元",
          payment: "", // 付款人数
          location: "福建",
          logistics: ["退货宝", "包邮"],
          merchant: "cidingji旗舰店",
          titleLogo: "地猫",
          type: "commodity",
        };
      },
    },
  },

  components: {},
  setup(props) {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.panel-box {
  background: #fff;
  overflow: hidden;
  font-weight: 400;
  image {
    width: 100%;
    display: block;
    border-radius: 10rpx;
  }
  .info-box {
    padding: 10rpx;
    position: relative;
    .distance-box {
      position: absolute;
      display: flex;
      top: -35rpx;
      left: 7rpx;
      background: #000000b2;
      font-size: 20rpx;
      color: #fff;
      border-radius: 8rpx;
      line-height: 20rpx;
      height: 20rpx;
      padding: 4rpx 8rpx;
      .icon-weibiaoti--25 {
        font-size: 18rpx;
        margin-right: 5rpx;
      }
    }
    .title {
      font-size: 28rpx;
      color: #000;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      .tiao-mao {
        // 背景渐变
        color: #fff;
        font-weight: 700;
        font-size: 22rpx;
        margin-right: 10rpx;
        padding: 0 8rpx;
        border-radius: 8rpx;
        background: linear-gradient(to top, #ff0000, #ff3a3a);
      }
    }

    .tag-item {
      font-size: 22rpx;
      color: #999;
      &.tag-style {
        color: #ff9900;
      }
      &.fa-bu {
        padding: 2rpx;
        border-radius: 10rpx 0 0 10rpx;
        line-height: 24rpx;
        background: linear-gradient(to right, #fffbbd, #fff);
        .icon-weibiaoti--15 {
          font-size: 22rpx;
        }
      }
    }

    .logo-box {
      width: 70rpx;
      image {
        width: 100%;
      }
    }
    .price-box {
      // 文字横向底部对齐
      display: flex;
      align-items: center;
      vertical-align: bottom;
      color: rgb(255, 123, 0);
      .rmb {
        font-size: 22rpx;
        font-weight: 700;
        margin-top: 10rpx;
        margin-right: 5rpx;
      }
      .price {
        font-size: 34rpx;
        font-weight: 700;
      }
      .price-des {
        font-size: 22rpx;
        margin-left: 5rpx;
        margin-top: 5rpx;
      }
      .payment-amount {
        margin-left: auto;
        color: #a7a7a7;
        font-size: 22rpx;
        margin-top: 5rpx;
      }
    }
    .other-tag {
      display: flex;
      // 居中
      align-items: center;
      .tag-red {
        color: rgb(255, 115, 0);
        font-size: 22rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
      }
      .icon-weibiaoti--40 {
        font-size: 24rpx;
        font-weight: 700;
        color: #a7a7a7;
        margin-left: auto;
      }
    }
    .merchant-info {
      background: #f5f5f5;
      line-height: 40rpx;
      border-radius: 20rpx;
      padding: 5rpx 10rpx;
      padding-right: 20rpx;
      font-size: 22rpx;
      color: #a5a5a5;
      .icon-weibiaoti--10 {
        font-size: 22rpx;
        color: #535353;
      }
      .in-shop {
        color: #535353;
        padding-right: 10rpx;
      }
    }
  }
}
</style>
